import { defineComponent } from "vue";
import LoginForm from "./components/loginForm";
import bgImg from "@/assets/images/login/bg.png";
import masterImg from "@/assets/images/login/6.png";
import left1 from "@/assets/images/login/5.png";
import bottom1 from "@/assets/images/login/4.png";
import bottom2 from "@/assets/images/login/3.png";
import right1 from "@/assets/images/login/2.png";
import Copyright from "@/components/Copyright/copyright.vue";
import "./index.scss";
import { sysTitle, sysLogo } from "../../hooks/useSystem";
const Login = defineComponent({
	setup() {
		return () => {
			return (
				<div class="login-container h-full">
					<div class="login-left animate__animated animate__fadeIn">
						<img src={bgImg} alt="login" />
						<div class="child-img">
							<div class="w-4/5 h-full items-center relative">
								<div class="master-img">
									<img src={masterImg} alt="login" />
								</div>
								<div class="left1">
									<img src={left1} alt="login" />
								</div>
								<div class="bottom1">
									<img src={bottom1} alt="login" />
								</div>
								<div class="bottom2">
									<img src={bottom2} alt="login" />
								</div>
								<div class="right1">
									<img src={right1} alt="login" />
								</div>
							</div>
						</div>
					</div>
					<div class="sys-title animate__animated animate__bounceInLeft ">
						<div class="logo hidden">
							<img src={sysLogo()} />
						</div>
						<div class="text hidden">{sysTitle()}</div>
					</div>
					<div class="login-form">
						<div class="login-logo pb-9 animate__animated animate__bounceInRight">
							<div class="logo-text">账号登录</div>
						</div>
						<LoginForm />
					</div>
					<Copyright />
				</div>
			);
		};
	}
});

export default Login;
